<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <style>
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <%--<c:if test="${loginInfo.userinfoId == 1}">--%>
    <form class="layui-form layui-row">
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label" for="typeId">类型号：</label>
                <div class="layui-input-block">
                    <input type="text" name="typeId" id="typeId" placeholder="精确匹配" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label" for="name">类型名：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="模糊匹配" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <%--<div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-block">
                    <select name="num" id="num">
                        <option value="">[选择状态]</option>
                    </select>
                </div>
            </div>
        </div>--%>
        <div class="layui-col-md3">
            <div style="margin-left: 20px">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search">查询</button>
                <button type="reset" class="layui-btn layui-bg-orange">清空</button>
            </div>
        </div>
    </form>
    <%--</c:if>--%>
    <div style="height: 530px;overflow-y: scroll;margin-top: 10px">
        <table id="dataTable"></table>
    </div>
</div>
</body>
<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加</button>
</script>
<script type="text/html" id="optTemplet">
    <%--<c:if test="${role == 1}">--%>
    <button type="button" lay-event="edit" class="layui-btn layui-btn-sm layui-bg-blue">修改</button>
    <%--</c:if>--%>
    <%--<c:if test="${loginInfo.userinfoId == 1}">--%>
    {{# if(d.userinfoId !== 1){ }}
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-bg-orange">删除</button>
    {{# } }}
    <%--</c:if>--%>
</script>
<script>
    var table;
    var form;
    var util;
    layui.use(function () {
        util = layui.util;
        /*加载表格模块*/
        table = layui.table;
        /*加载表单模块*/
        form = layui.form;
        /*loadType();*/
        /*渲染表格数据*/
        table.render({
            elem: "#dataTable",
            url: "admin/order/type/page",
            toolbar: "#toolbar",
            defaultToolbar: ['filter', 'print'],
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {field: 'typeId', title: '类型编号'},
                {field: 'name', title: '类型名称'},
                {field: 'num', title: '库存数量'},
                {title: '操作', templet: '#optTemplet'}
            ]]
        });
        /*监听表格工具栏按钮*/
        table.on("tool(dataTable)", function (obj) {
            const typeId = obj.data.typeId;
            const event = obj.event;
            switch (event) {
                case "delete":
                    layer.confirm('确定删除编号[' + typeId + ']的数据吗?', {
                        icon: 3,
                        title: '询问'
                    }, function (index) {
                        $.ajax({
                            url: "admin/order/type/delete/" + typeId,
                            method: "delete",
                            dataType: "json",
                            success(res) {
                                if (res.code === 200) {
                                    layer.msg("删除成功", {icon: 1})
                                    table.reloadData('dataTable')
                                } else {
                                    layer.alert(res.msg, {icon: 2})
                                }
                            },
                            error(e) {
                                layer.alert('服务器睡着了')
                                console.log(e)
                            }
                        })
                        layer.close(index);
                    })
                    break;
                case "edit":
                    layer.open({
                        type: 2,
                        content: "admin/order/type/edit?typeId=" + typeId,
                        area: ["600px", "400px"]
                    })
                    break;
                /*                case "status":
                                    layer.open({
                                        type: 2,
                                        content: "admin/order/status?orderId=" + orderId,
                                        area: ["500px", "100px"]
                                    })
                                    break;*/
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        });
        /*监听表格头部按钮*/
        table.on("toolbar(dataTable)", function (obj) {
            const event = obj.event;
            console.log(obj)
            switch (event) {
                case "LAYTABLE_PRINT":
                case "LAYTABLE_COLS":
                    break;
                case "add":
                    layer.open({
                        type: 2,
                        content: "admin/order/type/edit",
                        area: ["600px", "600px"]
                    })
                    break;
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        })
        /*监听表单提交(查询按钮)*/
        form.on("submit(search)", function (data) {
            table.reload('dataTable', {
                where: {
                    ...data.field,
                    page: 1
                }
            });
            return false;
        });
    });

    function loadType() {
        $.ajax({
            url: 'admin/order/type',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#num').empty();
                $('#num').append('<option value="">请选择类型</option>');
                $.each(data.data, function (index, item) {
                    $('#num').append('<option value="' + item.typeId + '">' + item.num + '</option>');
                });
                form.render('select'); // 渲染下拉框
            }
        });
    }
</script>
</html>
